﻿<template>
	<el-dialog :title="!dataForm.id ? '新建接口配置信息' : '编辑接口配置信息'" :close-on-click-modal="false" :close-on-press-escape="false"
		:visible.sync="visible" lock-scroll width="80%" :append-to-body="true" class="SHZY-dialog SHZY-dialog_center">
		<el-row :gutter="15" class="">
			<el-form ref="elForm" :model="dataForm" size="small" label-width="110px" label-position="right" :rules="rules">
				<el-col :span="24">
					<el-form-item label="编码" prop="enCode">
						<el-input v-model='dataForm.enCode' placeholder='请输入' clearable required
							:style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="描述" prop="fullName">
						<el-input v-model='dataForm.fullName' placeholder='请输入' clearable required
							:style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="执行接口" prop="execInterfaceId">
						<el-select v-model='dataForm.execInterfaceId' placeholder='请选择' clearable required
							:style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in interfaceData" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="异步处理" prop="asyncFlag">
						<el-radio-group v-model='dataForm.asyncFlag' size='small' @input="dataForm.cronJobFlag='N'" :disabled="dataForm.cronJobFlag == 'Y'" >
							<el-radio-button v-for="(item, index) in optionsData" :key="index" :label="item.id">{{
								item.fullName }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="异常重试次数" prop="retryCount">
						<el-input v-model='dataForm.retryCount' placeholder='填写0为无限重试' clearable
							:disabled="dataForm.asyncFlag == 'N'" :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="24">
					<el-form-item label="缓存" prop="cacheFlag">
						<el-radio-group v-model='dataForm.cacheFlag' size='small'>
							<el-radio-button v-for="(item, index) in optionsData" :key="index" :label="item.id">{{
								item.fullName }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<el-col :span="24">
					<el-form-item label="定时接口" prop="cronJobFlag">
						<el-radio-group v-model='dataForm.cronJobFlag' size='small' :disabled="dataForm.asyncFlag == 'Y'" >
							<el-radio-button v-for="(item, index) in optionsData" :key="index" :label="item.id">{{
								item.fullName }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="租户" prop="tenantId">
						<el-select v-model='dataForm.tenantId' placeholder='请选择' clearable required
							:disabled="dataForm.cronJobFlag == 'N'" :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in tenantIdOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="发送接口" prop="sendInterfaceId">
						<el-select v-model='dataForm.sendInterfaceId' placeholder='请选择' clearable
							:disabled="dataForm.cronJobFlag == 'N'" :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in interfaceData" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="Cron表达式" prop="cron">
						<el-input v-model='dataForm.cron' placeholder='Cron表达式' readonly
							:disabled="!(dataForm.cronJobFlag == 'Y' || dataForm.asyncFlag == 'Y')" :style='{ "width": "100%" }'>
							<el-button slot="append" icon="el-icon-edit-outline" @click="showDialog">
							</el-button>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="执行方式" prop="executeMethod">
						<el-radio-group v-model='dataForm.executeMethod' size='small'
							:disabled="!(dataForm.cronJobFlag == 'Y' || dataForm.asyncFlag == 'Y')">
							<el-radio-button v-for="(item, index) in executeMethodOptions" :key="index" :label="item.id">{{
								item.fullName }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input v-model='dataForm.remark' placeholder='请输入' show-word-limit :style='{ "width": "100%" }'
							type='textarea' :autosize='{ "minRows": 4, "maxRows": 4 }' maxlength='500'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="有效标志" prop="enabledMark">
						<el-switch v-model='dataForm.enabledMark' :active-value='1' :inactive-value='0'>
						</el-switch>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<el-dialog title="Cron表达式" :visible.sync="showCron" :close-on-click-modal="false"
			class="SHZY-dialog SHZY-dialog_center" lock-scroll append-to-body width="700px" @closed="showCrontab = false">
			<vcrontab ref="vcrontab" @hide="showCron = false" @fill="crontabFill" :expression="dataForm.cron"
				v-if="showCrontab" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCron = false">{{ $t('common.cancelButton') }}
				</el-button>
				<el-button type="warning" @click="resetCrontab">重 置</el-button>
				<el-button type="primary" @click="getCrontabValue">{{ $t('common.confirmButton') }}
				</el-button>
			</span>
		</el-dialog>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { getInterfaceConfigInfo, createInterfaceConfig, updateInterfaceConfig } from '@/api/system/interface/config'
import { getInterfaceAll } from '@/api/system/interface/interface'
import { getTenantAll } from '@/api/system/interface/tenant'
import vcrontab from "vcrontab"
export default {
	components: { vcrontab },
	props: [],
	data() {
		const retryCountValidator = (rule, value, callback) => {
			console.log(value)
			if (value.length == 0 && this.dataForm.asyncFlag == "Y") {
				callback(new Error("请填写异常重试次数"));
			} else {
				callback();
			}
		};
		const tenantIdValidator = (rule, value, callback) => {
			console.log(value)
			if (value.length == 0 && this.dataForm.cronJobFlag == "Y") {
				callback(new Error("请选择租户"));
			} else {
				callback();
			}
		};
		const cronValidator = (rule, value, callback) => {
			console.log(value)
			if (value.length == 0 && (this.dataForm.cronJobFlag == "Y" || this.dataForm.asyncFlag == "Y")) {
				callback(new Error("请填写Cron表达式"));
			} else {
				callback();
			}
		};
		return {
			showCron: false,
			showCrontab: true,
			btnLoading: false,
			loading: false,
			visible: false,
			dataForm: {
				id: '',
				enCode: '',
				fullName: '',
				execInterfaceId: '',
				asyncFlag: "N",
				retryCount: 0,
				cronJobFlag: "N",
				tenantId: "",
				sendInterfaceId: '',
				cron: '',
				executeMethod: "Serial",
				cacheFlag: "N",
				remark: '',
				enabledMark: 1,
			},
			rules: {
				enCode: [
					{
						required: true,
						message: '请输入编码',
						trigger: '"blur"'
					},
				],
				fullName: [
					{
						required: true,
						message: '请输入描述',
						trigger: '"blur"'
					},
				],
				execInterfaceId: [
					{
						required: true,
						message: '请输入执行接口ID',
						trigger: '"change"'
					},
				],
				retryCount: [
					{
						pattern: /^\d+$/,
						message: '请输入正确的数字',
						trigger: '"blur"'
					},
					{
						required: true,
						validator: retryCountValidator,
						trigger: '"blur"'
					}
				],
				tenantId: [
					{
						required: true,
						validator: tenantIdValidator,
						trigger: '"blur"'
					}
				],
				cron: [
					{
						required: true,
						validator: cronValidator,
						trigger: '"blur"'
					}
				],
			},
			interfaceData: [],
			optionsData: [{ 'fullName': "是", 'id': "Y" }, { 'fullName': "否", 'id': "N" }],
			executeMethodOptions: [{ 'fullName': "并行", 'id': "Parallel" }, { 'fullName': "串行", 'id': "Serial" }],
			tenantIdOptions: [],
		}
	},
	computed: {},
	watch: {},
	created() {
		this.getInterfaceAll()
		this.getTenantAll()
	},
	mounted() {
	},
	methods: {
		getTenantAll() {
			getTenantAll().then(res => {
				this.tenantIdOptions = res.data.list;
			})
		},
		getInterfaceAll() {
			getInterfaceAll().then(res => {
				this.interfaceData = res.data.list;
			})
		},
		goBack() {
			this.$emit('close')
		},
		init(id) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				if (this.dataForm.id) {
					getInterfaceConfigInfo(this.dataForm.id).then(res => {
						this.dataForm = res.data;
					})
				}
			});
		},
		dataFormSubmit() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					this.btnLoading = true;
					const formMethod = !this.dataForm.id ? createInterfaceConfig : updateInterfaceConfig;
					formMethod(this.dataForm).then((res) => {
						this.btnLoading = false;
						this.$message({
							message: res.msg,
							type: 'success',
							duration: 1000,
							onClose: () => {
								this.visible = false,
									this.$emit('close', true)
							}
						})
					}).catch((res) => {
						this.btnLoading = false;
					})
				}
			})
		},
		getCrontabValue() {
			this.$refs.vcrontab && this.$refs.vcrontab.submitFill()
		},
		resetCrontab() {
			this.$refs.vcrontab && this.$refs.vcrontab.clearCron()
		},
		crontabFill(value) {
			this.dataForm.cron = value
		},
		showDialog() {
			this.showCron = true
			this.showCrontab = true
		}
	}
}
</script>
<style lang="scss" scoped>
>>>.el-dialog__body {
	padding: 10px 10px 0 !important;
}

>>>.popup-main {
	.pop_btn {
		display: none !important;
	}

	.popup-result:nth-child(2) {
		margin-bottom: 2px;
	}
}

.delBtn {
	text-align: right;
}
</style>
